<template>
	<el-dialog
		:title="`代理${curData.proxyName}的收益比例明细`"
		:visible="visible"
		width="1200px"
		class="rempadding"
		:destroy-on-close="true"
		:before-close="handleClose"
		@close="handleClose"
	>
		<el-divider></el-divider>
		<el-row class="contentBox">
			<el-col :span="5">代理账号: {{ curData.proxyName }}</el-col>
			<el-col :span="4">代理层级: {{ curData.proxyLevel }}</el-col>
			<el-col :span="5">直属上级: {{ curData.parentProxyName }}</el-col>
			<el-col :span="5">总代理: {{ curData.topProxyName }}</el-col>
			<el-col :span="5">
				业务模式:
				{{ mappingBusinessModel(businessModelData.businessModel) }}
			</el-col>
		</el-row>
		<div class="contentBox mt30">团队信息:</div>
		<el-table
			v-loading="loading"
			element-loading-spinner="el-icon-loading"
			size="mini"
			class="small-size-table"
			:data="data"
			style="width: 100%; margin: 15px 0"
			:header-cell-style="getRowClass"
			highlight-current-row
		>
			<el-table-column
				prop="userName"
				align="center"
				label="结算周期"
				width="200"
			>
				<template slot-scope="scope">
					{{ getDateCircle(scope.row.startDate, scope.row.endDate) }}
				</template>
			</el-table-column>
			<el-table-column prop="userName" align="center" label="团队人数">
				<template slot-scope="scope">
					{{ scope.row.commissionNum }}
				</template>
			</el-table-column>
			<el-table-column
				prop="userName"
				align="center"
				label="新增团队人数"
			>
				<template slot-scope="scope">
					{{ scope.row.newCommissionNum }}
				</template>
			</el-table-column>
			<el-table-column
				prop="userName"
				align="center"
				label="团队活跃人数"
			>
				<template slot-scope="scope">
					{{ scope.row.activeCommissionNum }}
				</template>
			</el-table-column>
			<el-table-column prop="userName" align="center" label="直属会员数">
				<template slot-scope="scope">
					{{ scope.row.directlyMemberNum }}
				</template>
			</el-table-column>
			<el-table-column
				prop="userName"
				align="center"
				label="新增直属会员数"
			>
				<template slot-scope="scope">
					{{ scope.row.newDirectlyMemberNum }}
				</template>
			</el-table-column>
			<el-table-column
				prop="userName"
				align="center"
				label="活跃直属会员数"
			>
				<template slot-scope="scope">
					{{ scope.row.activeDirectlyMemberNum }}
				</template>
			</el-table-column>
			<el-table-column prop="userName" align="center" label="下级代理数">
				<template slot-scope="scope">
					{{ scope.row.underProxyNum }}
				</template>
			</el-table-column>
			<el-table-column
				prop="userName"
				align="center"
				label="新增下级代理数"
			>
				<template slot-scope="scope">
					{{ scope.row.newUnderProxyNum }}
				</template>
			</el-table-column>
		</el-table>
		<div class="contentBox mt30">德州场馆:</div>
		<el-table
			v-loading="loading"
			element-loading-spinner="el-icon-loading"
			size="mini"
			class="small-size-table"
			:data="other1"
			style="width: 100%; margin: 15px 0"
			:header-cell-style="getRowClass"
			highlight-current-row
		>
			<el-table-column
				prop="userName"
				align="center"
				label="俱乐部分成比例"
			>
				<template slot-scope="scope">
					{{ scope.row.texasRebate }}%
				</template>
			</el-table-column>
			<el-table-column
				prop="userName"
				align="center"
				label="保险分成比例"
			>
				<template slot-scope="scope">
					{{ scope.row.texasInsuranceRebate }}%
				</template>
			</el-table-column>
			<el-table-column
				prop="userName"
				align="center"
				label="增值服务分成比例"
			>
				<template slot-scope="scope">
					{{ scope.row.valueAddedServiceRebate }}%
				</template>
			</el-table-column>
		</el-table>
		<div class="contentBox mt30">其他场馆:</div>
		<el-table
			v-loading="loading"
			element-loading-spinner="el-icon-loading"
			size="mini"
			class="small-size-table"
			:data="other1"
			style="width: 100%; margin: 15px 0"
			:header-cell-style="getRowClass"
			highlight-current-row
		>
			<el-table-column
				prop="userName"
				align="center"
				label="真人团队返点比例"
			>
				<template slot-scope="scope">
					{{ scope.row.actualPersonRebate }}%
				</template>
			</el-table-column>
			<el-table-column
				prop="userName"
				align="center"
				label="体育团队返点比例"
			>
				<template slot-scope="scope">
					{{ scope.row.sportsRebate }}%
				</template>
			</el-table-column>
			<el-table-column
				prop="userName"
				align="center"
				label="彩票团队返点比例"
			>
				<template slot-scope="scope">
					{{ scope.row.lotteryTicketRebate }}%
				</template>
			</el-table-column>
			<el-table-column
				prop="userName"
				align="center"
				label="棋牌团队返点比例"
			>
				<template slot-scope="scope">
					{{ scope.row.chessRebate }}%
				</template>
			</el-table-column>
			<el-table-column
				prop="userName"
				align="center"
				label="电竞团队返点比例"
			>
				<template slot-scope="scope">
					{{ scope.row.esportsRebate }}%
				</template>
			</el-table-column>
			<el-table-column
				prop="electronicRebate"
				align="center"
				label="电子团队返点比例"
			>
				<template slot-scope="scope">
					{{ scope.row.electronicRebate }}%
				</template>
			</el-table-column>
		</el-table>

		<div class="contentBox mt30">其他场馆:</div>
		<el-table
			v-loading="loading"
			element-loading-spinner="el-icon-loading"
			size="mini"
			class="small-size-table"
			:data="other2"
			style="width: 100%; margin: 15px 0"
			:header-cell-style="getRowClass"
			highlight-current-row
		>
			<el-table-column
				prop="userName"
				align="center"
				label="真人团队占成比例"
			>
				<template slot-scope="scope">
					{{ scope.row.actualPersonRebate }}%
				</template>
			</el-table-column>
			<el-table-column
				prop="userName"
				align="center"
				label="体育团队占成比例"
			>
				<template slot-scope="scope">
					{{ scope.row.sportsRebate }}%
				</template>
			</el-table-column>
			<el-table-column
				prop="userName"
				align="center"
				label="彩票团队占成比例"
			>
				<template slot-scope="scope">
					{{ scope.row.lotteryTicketRebate }}%
				</template>
			</el-table-column>
			<el-table-column
				prop="userName"
				align="center"
				label="棋牌团队占成比例"
			>
				<template slot-scope="scope">
					{{ scope.row.chessRebate }}%
				</template>
			</el-table-column>
			<el-table-column
				prop="userName"
				align="center"
				label="电竞团队占成比例"
			>
				<template slot-scope="scope">
					{{ scope.row.esportsRebate }}%
				</template>
			</el-table-column>
			<el-table-column
				prop="electronicRebate"
				align="center"
				label="电子团队占成比例"
			>
				<template slot-scope="scope">
					{{ scope.row.electronicRebate }}%
				</template>
			</el-table-column>
		</el-table>

		<div class="contentBox mt30">平台默认会员返水:</div>
		<el-table
			v-loading="loading"
			element-loading-spinner="el-icon-loading"
			size="mini"
			class="small-size-table"
			:data="other3"
			style="width: 100%; margin: 15px 0"
			:header-cell-style="getRowClass"
			highlight-current-row
		>
			<el-table-column
				prop="userName"
				align="center"
				label="德州俱乐部返点比例"
			>
				<template slot-scope="scope">
					{{ scope.row.texasRebate }}%
				</template>
			</el-table-column>
			<el-table-column
				prop="userName"
				align="center"
				label="真人返水比例"
			>
				<template slot-scope="scope">
					{{ scope.row.actualPersonRebate }}%
				</template>
			</el-table-column>
			<el-table-column
				prop="userName"
				align="center"
				label="体育返水比例"
			>
				<template slot-scope="scope">
					{{ scope.row.sportsRebate }}%
				</template>
			</el-table-column>
			<el-table-column
				prop="userName"
				align="center"
				label="彩票返水比例"
			>
				<template slot-scope="scope">
					{{ scope.row.lotteryTicketRebate }}%
				</template>
			</el-table-column>
			<el-table-column
				prop="userName"
				align="center"
				label="棋牌返水比例"
			>
				<template slot-scope="scope">
					{{ scope.row.chessRebate }}%
				</template>
			</el-table-column>
			<el-table-column
				prop="userName"
				align="center"
				label="电竞返水比例"
			>
				<template slot-scope="scope">
					{{ scope.row.esportsRebate }}%
				</template>
			</el-table-column>
			<el-table-column
				prop="electronicRebate"
				align="center"
				label="电子返水比例"
			>
				<template slot-scope="scope">
					{{ scope.row.electronicRebate }}%
				</template>
			</el-table-column>
		</el-table>
	</el-dialog>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'

export default {
  components: {},
  mixins: [list],
  props: {
    curData: {
      type: Object,
      default: () => { }
    },
    visible: {
      type: Boolean,
      default: false
    },
    handleVisible: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      loading: false,
      businessModelData: '',
      data: [],
      other1: [],
      other2: [],
      other3: []
    }
  },
  watch: {
    curData: {
      handler(newVal) {
        if (!newVal) return
        this.getData()
      },
      deep: true
    }
  },
  created() {
    this.getData()
    // 获取团队返点比例
    this.getQueryData()
  },
  methods: {
    // 获取代理账号信息
    getData() {
      this.loading = true
      console.log(this.curData.orderNo)
      this.$api
        .proxyIncomeIncomeDetail({
          id: this.curData.orderNo
        })
        .then((res) => {
          this.loading = false
          this.data = [res.data || {}]
        })
        .catch(() => {
          this.loading = false
        })
      // 获取业务模式
      this.$api
        .getProxyDetailQueryDetail({
          merchantId: this.curData.merchantId,
          userName: this.curData.proxyName
        })
        .then((res) => {
          if (res?.code === 200) {
            this.businessModelData = res.data || {}
          }
        })
    },
    handleClose() {
      this.$emit('update:visible', false)
    },
    getQueryData() {
      // merchantId  userId userType version
      this.$api
        .rebateRateQuery({
          merchantId: this.curData.merchantId,
          userId: this.curData.proxyId,
          version: this.curData.version || this.curData.rateVersion,
          userType: 1
        })
        .then((res) => {
          // platformFlag = 0, zhanchengFlag= 0  返点比例
          // platformFlag = 0, zhanchengFlag= 1  占成比例
          // platformFlag = 1 ,user_type = 2   会员返水
          this.other1 =
            res.data.filter(
              (ele) =>
                ele.platformFlag === 0 &&
                ele.zhanchengFlag === 0
            ) || []
          this.other2 =
            res.data.filter(
              (ele) =>
                ele.platformFlag === 0 &&
                ele.zhanchengFlag === 1
            ) || []
          this.other3 =
            res.data.filter(
              (ele) =>
                ele.platformFlag === 1 && ele.userType === 2
            ) || []
        })
    },
    getDateCircle(start, end) {
      const format = (str) =>
        `${str.substring(0, 4)}-${str.substring(4, 6)}-${str.substring(
          6,
          8
        )}`
      return `${format(start.toString())} - ${format(end.toString())}`
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .rempadding .el-dialog__header {
	color: #909399;
	font-weight: 700;
}
::v-deep .rempadding .el-dialog__body {
	padding: 0;
	padding-bottom: 30px;
	.contentBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.contentBox,
	form {
		padding: 0 20px;
	}
}
</style>
